<template>
	<view>
		<view class="spectator-container">
			<view class="spectator-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="back()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					观演人
				</view>
			</view>
			<view class="spectator-content">
				<view class="spectator-box" v-for="(item, index) in displaySpectatorList" :key="index">
					<view class="spectator-card">
						<view class="spectator-list">
							<view class="spectator-item">
								<view class="spectator-item-left-content">
									<view class="spectator-item-name">
										{{item.name}}
									</view>
									<view class="spectator-item-id-row">
										<view class="spectator-item-id-type">
											{{item.idType}}：
										</view>
										<view class="spectator-item-id-number">
											{{item.displayIdCard}}
										</view>

									</view>
									<view class="spectator-item-phone">
										手机号：{{item.phone}}
									</view>
								</view>
								<view class="spectator-item-right-content"><strong></strong>
									<view class="icon-box">
										<view class="del-box">
											<uni-icons class="icon-del" type="trash" size="24"
												@click="delSpectator(item.id)"></uni-icons>
										</view>
										<view class="edit-box">
											<img class="icon-edit" src="/static/other-icon/edit.svg" alt=""
												@click="updateSpectator(item.id)" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="spectator-btn-box">
			<view class="spectator-btn" @click="createSpectator()">
				新建观演人
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		watchEffect,
		onUpdated,
		inject,
		onBeforeMount
	} from 'vue';
	import {
		onShow,
		onHide,
		onUnload,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		sharedState,
		updateState
	} from '@/common/store.js'
	import {
		maskIdCard
	} from '@/common/maskIdCard.js';
	let displaySpectatorList = ref([]);

	let spectatorList = ref([])
	let idType = ref(["身份证", "台湾通行证", "港澳通行证", "护照"]) //随机身份证件类型数组
	let selectSpectatorList = ref([]);
	const globalData = inject('globalData');
	//返回个人页面
	let back = () => {
		console.log('back called');
		uni.switchTab({
			url: "/pages/person/person"
		})
	}

	const userId = ref(0);

	//跳转到创建观演人页面
	let createSpectator = () => {
		updateState(null);
		uni.navigateTo({
			url: "/pages/editspectator/editspectator"
		})
	}
	//通过id跳转到编辑观演人页面
	let updateSpectator = (id) => {
		updateState(id);
		uni.navigateTo({
			url: "/pages/editspectator/editspectator?id=" + id
		})
	}

	const getSpectator = (userId) => {
		uni.request({
			url: `/st/audience/listByUserId/${userId}`,
			method: "GET",
			success: (res) => {
				console.log(res.data);
				if (res.data.code == 2000) {
					spectatorList.value = res.data.data;
					displaySpectatorList.value = [];
					spectatorList.value.forEach(item => {
						displaySpectatorList.value.push({
							...item,
							displayIdCard: maskIdCard(item.idNumber)
						});
					});
				} else {

				}
			},
			fail: () => {

			}
		})
	}

	const delSpectator = (id) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除此观演人吗？',
			confirmText: '确定',
			cancelText: '取消',
			confirmColor: '#ff2d2de2',
			success: (res) => {
				if (res.confirm) {

					uni.request({
						url: `/st/audience/del/${id}`,
						method: 'DELETE',
						success: (res) => {
							if(res.data.code == 2000){
								getSpectator(userId.value);
							}
							
						},
						fail: (res) => {

						},
					})




					uni.setStorage({
						key: 'selectSpectator',
						data: selectSpectatorList.value,
						success: function() {
							console.log('数据存储成功');
						},
						fail: function(err) {
							console.error('数据存储失败', err);
						}
					});

				} else if (res.cancel) {
					// 用户点击了取消，什么也不做
					console.log('用户点击了取消');
				}
			},
			fail: (err) => {
				console.error('模态对话框调用失败', err);
			}
		});
	};






	onBeforeMount(() => {
		uni.getStorage({
			key: 'userLogin',
			success: function(res) {
				userId.value = res.data.id;
				
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
		
		getSpectator(userId.value);
	});
</script>

<style lang="scss" scoped>
	.spectator-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.spectator-header {
			top: 0px;
			width: 100%;
			height: 50px;
			display: flex;
			position: fixed;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;

			}
		}


		.spectator-content {
			width: 100%;
			height: auto;
			background: #f8f8fe;
			margin-top: 50px;
			float: left;
			padding: 0px 15px;
			box-sizing: border-box;

			.spectator-box {
				width: 100%;
				height: 110px;
				margin: 15px 0px;
				background: #fff;
				box-shadow: 0px 0px 6px 0px #ddd;
				border-radius: 5px;

				.spectator-item {
					width: 100%;
					height: 110px;
					box-sizing: border-box;
					padding: 10px 15px;

					.spectator-item-left-content {
						width: auto;
						height: 100%;
						float: left;

						.spectator-item-name {
							width: auto;
							height: 30px;
							line-height: 30px;
							font-size: 14px;
							font-weight: bold;
						}

						.spectator-item-id-row {
							width: auto;
							height: 30px;
							line-height: 30px;
							color: #999999;
							font-size: 12px;

							.spectator-item-id-type {
								width: auto;
								float: left;
							}

							.spectator-item-id-number {
								width: auto;
								float: left;
							}
						}

						.spectator-item-phone {
							width: auto;
							height: 30px;
							line-height: 30px;
							color: #999999;
							font-size: 12px;
						}

					}

					.spectator-item-right-content {
						width: auto;
						height: 60px;
						float: right;

						.icon-box {
							width: auto;
							height: 60px;
							float: right;
							box-sizing: border-box;
							padding: 0 0px 0px 0px;

							.del-box {
								width: 100%;
								height: 45px;
								line-height: 45px;

								.icon-del {
									line-height: 45px;
								}
							}

							.edit-box {
								width: 100%;
								height: 45px;

								.icon-edit {
									margin-top: 10px;
									width: 24px;
									height: 24px;
								}
							}

						}
					}

				}
			}

			.spectator-box:last-child {
				margin-bottom: 100px;
			}


		}

	}

	.spectator-btn-box {
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 20px 15px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px 0px 4px 0px #d3d3d3;

		.spectator-btn {
			width: 100%;
			height: 40px;
			font-size: 14px;
			background: #ff2d2de2;
			color: #fff;
			border-radius: 4px;
			line-height: 40px;
			text-align: center;
		}
	}
</style>